<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="vue," />










<meta name="description" content="Vue入坑笔记(大杂烩)标签： vue [TOC] 置顶: 源代码地址: https://github.com/JepsonGithub/VueDemo  什么是Vue.js Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并称为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配">
<meta name="keywords" content="vue">
<meta property="og:type" content="article">
<meta property="og:title" content="vue入坑笔记(大杂烩)">
<meta property="og:url" content="http://yoursite.com/2018/02/12/vue入坑笔记/index.html">
<meta property="og:site_name" content="Jepson_鹏鹏的专栏">
<meta property="og:description" content="Vue入坑笔记(大杂烩)标签： vue [TOC] 置顶: 源代码地址: https://github.com/JepsonGithub/VueDemo  什么是Vue.js Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并称为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://static.zybuluo.com/JepsonCC/fk6tqxxmy17hpxkrmlvcxsl0/image_1c5ih14ve1gvj9t5n6f11epe9k9.png">
<meta property="og:updated_time" content="2018-02-13T06:53:44.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="vue入坑笔记(大杂烩)">
<meta name="twitter:description" content="Vue入坑笔记(大杂烩)标签： vue [TOC] 置顶: 源代码地址: https://github.com/JepsonGithub/VueDemo  什么是Vue.js Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并称为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配">
<meta name="twitter:image" content="http://static.zybuluo.com/JepsonCC/fk6tqxxmy17hpxkrmlvcxsl0/image_1c5ih14ve1gvj9t5n6f11epe9k9.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2018/02/12/vue入坑笔记/"/>





  <title>vue入坑笔记(大杂烩) | Jepson_鹏鹏的专栏</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Jepson_鹏鹏的专栏</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">Just do it!</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/02/12/vue入坑笔记/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Jepson">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://static.zybuluo.com/JepsonCC/focrrncqb7uriops1uguvcfd/image_1c4uu558p1vhh71a1mvqbsp11i2m.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Jepson_鹏鹏的专栏">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">vue入坑笔记(大杂烩)</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-02-12T10:31:00+08:00">
                2018-02-12
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/vue/" itemprop="url" rel="index">
                    <span itemprop="name">vue</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="Vue入坑笔记-大杂烩"><a href="#Vue入坑笔记-大杂烩" class="headerlink" title="Vue入坑笔记(大杂烩)"></a>Vue入坑笔记(大杂烩)</h2><p>标签： vue</p>
<p>[TOC]</p>
<p><strong>置顶: 源代码地址: <a href="https://github.com/JepsonGithub/VueDemo" target="_blank" rel="noopener">https://github.com/JepsonGithub/VueDemo</a></strong></p>
<hr>
<h2 id="什么是Vue-js"><a href="#什么是Vue-js" class="headerlink" title="什么是Vue.js"></a>什么是Vue.js</h2><ul>
<li>Vue.js 是前端的<strong>主流框架之一</strong>，和Angular.js、React.js 一起，并称为前端三大主流框架！</li>
<li>Vue.js 是一套构建用户界面的框架，<strong>只关注视图层</strong>，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）</li>
<li>前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道；</li>
</ul>
<h2 id="Vue-js-初体验"><a href="#Vue-js-初体验" class="headerlink" title="Vue.js 初体验"></a>Vue.js 初体验</h2><p><strong>vuejs 的强项就在于数据绑定</strong></p>
<ol>
<li><strong>双向数据绑定  (一般用于表单元素)</strong><pre><code>当数据和元素进行双向数据绑定之后, 数据发生变化, 元素中的内容也会发生变化, 元素中的内容发生变化, 数据也会发生变化
</code></pre></li>
<li><strong>单向数据绑定  (一般用于展示型元素)</strong><pre><code>当数据和元素进行单向数据绑定之后, 数据发生变化, 元素中的内容也会发生变化, 元素的内容发生变化, 不会影响到数据
</code></pre><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 指定内容由 app 进行管理, 注意: id=app 不能加给body --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"msg"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 创建 Vue 实例</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// el 固定属性, 用来指定 vm 对象管理的元素</span></span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// data 固定属性, 用来给 vm 对象管理的元素提供数据</span></span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      msg: <span class="string">"我是数据"</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="Vue-双向数据绑定基本原理"><a href="#Vue-双向数据绑定基本原理" class="headerlink" title="Vue 双向数据绑定基本原理"></a>Vue 双向数据绑定基本原理</h2><h3 id="前置知识点-defineProperty"><a href="#前置知识点-defineProperty" class="headerlink" title="前置知识点: defineProperty"></a>前置知识点: defineProperty</h3><p>Object.defineProperty<br>功能: 可以用来给对象添加新属性, 也可以修改对象已经存在的属性<br>特点: 这种方式添加的属性可以设置属性的特征</p>
<p>属性的特征:</p>
<ol>
<li>属性可不可写    writeable</li>
<li>属性可不可遍历(枚举)  enumerable</li>
<li>属性可不可删除, 配置   configurable</li>
<li>属性的默认值  value</li>
<li>属性的设置和获取方法( 重点 )</li>
</ol>
<p>语法: Object.defineProperty(要添加属性的对象, 要添加的属性名, 属性的特征对象)<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123; </span><br><span class="line">  name: <span class="string">"鹏鹏"</span></span><br><span class="line">&#125;  </span><br><span class="line"><span class="comment">// obj.yanzhi = 999999;</span></span><br><span class="line"><span class="comment">// obj.yanzhi = "丑的要死";</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.defineProperty( obj, <span class="string">"yanzhi"</span>, &#123;</span><br><span class="line">  <span class="comment">// writeable 属性: 可设置当前属性是否可以被赋值, 默认是 false</span></span><br><span class="line">  writable: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// enumerable 属性: 可设置当前属性是否可以被遍历, 默认是 false, 不可枚举</span></span><br><span class="line">  enumerable: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// configurable 属性: 设置当前属性描述符是否可改, 当前属性是否可删除, 默认是false</span></span><br><span class="line">  configurable: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// value 属性: 配置属性的默认值</span></span><br><span class="line">  value: <span class="number">99999999</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( obj );</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> ( <span class="keyword">var</span> k <span class="keyword">in</span> obj ) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log( k );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="get-和-set-重点"><a href="#get-和-set-重点" class="headerlink" title="get 和 set(重点)"></a>get 和 set(重点)</h3><blockquote>
<p>注意: value 和 writable 属性 和 get, set 不能共存, 共存会报错</p>
</blockquote>
<p><img src="http://static.zybuluo.com/JepsonCC/fk6tqxxmy17hpxkrmlvcxsl0/image_1c5ih14ve1gvj9t5n6f11epe9k9.png" alt="image_1c5ih14ve1gvj9t5n6f11epe9k9.png-45.4kB"></p>
<ul>
<li>get 函数, 属性在被获取值时, 自动调用, 获取的值是 get 函数的返回值</li>
<li>set 函数在 属性被赋值时, 自动调用</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123; </span><br><span class="line">  name: <span class="string">"鹏鹏"</span></span><br><span class="line">&#125;  </span><br><span class="line"><span class="built_in">Object</span>.defineProperty( obj, <span class="string">"yanzhi"</span>, &#123;</span><br><span class="line">  enumerable: <span class="literal">true</span>,</span><br><span class="line">  configurable: <span class="literal">true</span>,</span><br><span class="line">  get: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// get 函数, 属性在被获取值时, 自动调用, 获取的值时 get 函数的返回值</span></span><br><span class="line">    <span class="built_in">console</span>.log( <span class="string">"get函数被调用了"</span> );</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 递归死循环: return this.yanzhi; 这句话又会调用 get 方法</span></span><br><span class="line">    <span class="comment">// 所以要在 属性前面加上 _  =&gt; _yanzhi</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>._yanzhi;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  set: <span class="function"><span class="keyword">function</span>(<span class="params"> value </span>) </span>&#123;</span><br><span class="line">    <span class="comment">// set 函数在 属性被赋值时, 自动调用</span></span><br><span class="line">    <span class="built_in">console</span>.log( <span class="string">"set函数被调用了"</span> );</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 递归死循环: this.yanzhi = value; 这句话又会调用 set 方法</span></span><br><span class="line">    <span class="keyword">this</span>._yanzhi = value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">obj.yanzhi = <span class="number">999</span>;</span><br><span class="line"><span class="built_in">console</span>.log(obj.yanzhi);</span><br></pre></td></tr></table></figure>
<p>可以在set方法中监听属性的变化<br>也可以在set方法中, 为属性的赋值设置合法性校验<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 赋值操作时会调用 set 方法, 可以在set方法中监听属性的变化</span></span><br><span class="line">set: <span class="function"><span class="keyword">function</span>(<span class="params"> value </span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log( <span class="string">"属性改变了"</span> )</span><br><span class="line">  </span><br><span class="line">  <span class="comment">// 也可以在set方法中, 为属性的赋值设置合法性校验</span></span><br><span class="line">  <span class="keyword">if</span> ( value &lt; <span class="number">99999999999</span> ) &#123;</span><br><span class="line">    <span class="keyword">this</span>._yanzhi = <span class="number">99999999999</span></span><br><span class="line">    <span class="keyword">throw</span> <span class="string">"总有刁明想害朕"</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">this</span>._yanzhi = value;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="双向数据绑定"><a href="#双向数据绑定" class="headerlink" title="双向数据绑定"></a>双向数据绑定</h3><p>利用 es5 提供的defineProperty, 可以实现数据的双向数据绑定</p>
<p>我们自己可以监听 input 框里面的变化, 可以同步到数据对象, 而数据对象的变化, 我们一般不好监听, 但是利用 es5 提供的 defineProperty, 通过监听get, set 即可实现数据的双向绑定<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"txt"</span> <span class="attr">value</span>=<span class="string">"鹏鹏"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> obj = &#123;</span></span><br><span class="line"><span class="javascript">    name: <span class="string">"鹏鹏"</span></span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 1. 当元素发生变化的时候, 影响数据</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> txt = <span class="built_in">document</span>.getElementById(<span class="string">"txt"</span>)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 注册 input 事件</span></span></span><br><span class="line"><span class="javascript">  txt.addEventListener(<span class="string">"input"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 改变input值时, 同步更新到对象中</span></span></span><br><span class="line"><span class="undefined">    obj.name = txt.value</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 2 当数据发生变化时, 页面上也要变化</span></span></span><br><span class="line"><span class="javascript">  <span class="built_in">Object</span>.defineProperty(obj, <span class="string">"name"</span>, &#123;</span></span><br><span class="line"><span class="undefined">    get() &#123;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    set( value ) &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 只要这个函数被调用了, 就证明属性被修改了</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// 就可以在这里给绑定的元素赋值了</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>._name = value;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 改变对象的值时, 同步更新到页面中</span></span></span><br><span class="line"><span class="undefined">      txt.value = value;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="v-bind-使用-vue-给属性绑定数据"><a href="#v-bind-使用-vue-给属性绑定数据" class="headerlink" title="v-bind 使用 vue 给属性绑定数据"></a>v-bind 使用 vue 给属性绑定数据</h2><p>当需要给html标签中的属性绑定一个数据的时候, 不能使用插值表达式,<br>要用 v-bind 指令</p>
<ul>
<li>语法 v-bind:属性名=”数据名称</li>
<li>简写 :属性名=”数据名称”</li>
</ul>
<p>注意: 如果视图中用到的属性, 在数据模型中没有定义, 就会报错</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  &#123;&#123; msg &#125;&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">:title</span>=<span class="string">"msg"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="v-if-和-v-show"><a href="#v-if-和-v-show" class="headerlink" title="v-if 和 v-show"></a>v-if 和 v-show</h2><p>区别在于: </p>
<ol>
<li>v-if: 如果值为 false, 内部元素直接不渲染, 切换flag时, 会重复删除节点, 解析渲染节点</li>
<li>v-show: 如果值为 false, 只是让节点的 display 为 none, 切换时, 切换的 display</li>
</ol>
<p><strong>应用:</strong><br>所以在一些需要频繁切换显示状态的, 比如说 tab 栏切换, 弹出层等等, 用 v-show 比较合适, 频繁切换也不会太耗性能</p>
<p>而形如页面模板渲染, 不需要频繁切换的, 有就有没有就没有的, 就用 v-if 比较合适, 有些内容, 如果不想渲染, 还出现在页面节点中就不太好, 直接不渲染就好了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- v-if 是用来做条件判断的, 如果值为false, 则元素会直接被从 html 中删除了 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- v-show 也可以用来做条件判断, 如果值为false, 则元素隐藏 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">"flag"</span>&gt;</span> &#123;&#123; msg &#125;&#125; <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="v-on-指令的使用"><a href="#v-on-指令的使用" class="headerlink" title="v-on 指令的使用"></a>v-on 指令的使用</h2><p>注册事件的时候, 可以直接写函数名称, 也可以加上() 当成表达式调用, 但是区别在于, 写成函数调用的那种是可以传参的, 这是比较方便的</p>
<p>另外: v-on:事件 可以简写为 @事件=”事件处理函数()”<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">  <span class="comment">&lt;!-- v-on 指令语法</span></span><br><span class="line"><span class="comment">       v-on:事件类型="事件处理函数"</span></span><br><span class="line"><span class="comment">       v-on:事件类型="表达式"</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">       简写: </span></span><br><span class="line"><span class="comment">       @事件类型="事件处理函数"</span></span><br><span class="line"><span class="comment">       @事件类型="表达式"</span></span><br><span class="line"><span class="comment">  --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 当成表达式, 解析执行表达式 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"num = 1 + 1"</span>&gt;</span>加成2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 当成方法, 来调用 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"clickHandler"</span>&gt;</span>clickHandler<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 当成表达式, 解析执行 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"clickHandler()"</span>&gt;</span>clickHandler()<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- v-on 可以 简写成 @事件 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"clickHandler()"</span>&gt;</span>@<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 定义数据模型</span></span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="undefined">      num: 0</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 定义方法</span></span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 点击处理函数</span></span></span><br><span class="line"><span class="undefined">      clickHandler() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.num += <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( <span class="keyword">this</span>.num );</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="在-vue-事件中获取事件对象"><a href="#在-vue-事件中获取事件对象" class="headerlink" title="在 vue 事件中获取事件对象"></a>在 vue 事件中获取事件对象</h2><ol>
<li>如果事件是通过 <code>@click=函数名</code> 函数名来注册的, 直接通过 e 就可以拿到事件对象</li>
<li>但是如果是 <code>@click=函数名()</code> 表达式注册的, 由于是手动调用, 所有就没有默认的 event 参数, 如果需要事件对象必须手动传 <strong>$event</strong></li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"btnClick"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="comment">&lt;!-- 相当于手动调用函数, 这样没有event --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"btnClick2()"</span>&gt;</span>按钮2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="comment">&lt;!-- 但是就是想获取事件对象怎么办呢? vue 提供了 $event --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"btnClick2( $event )"</span>&gt;</span>按钮2 $event<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 如果事件是通过, 函数名称来直接注册的</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// 我们可以直接通过函数的 e 参数来作为事件对象来用</span></span></span><br><span class="line"><span class="undefined">      btnClick( e ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( e )</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      btnClick2( e ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( e )</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="vue-中的事件修饰符"><a href="#vue-中的事件修饰符" class="headerlink" title="vue 中的事件修饰符"></a>vue 中的事件修饰符</h2><p>事件修饰符:<br>通过事件修饰符, 我们可以为事件处理函数指定一些特定的功能</p>
<ol>
<li>阻止冒泡 stop</li>
<li>阻止默认行为 prevent</li>
<li>捕获阶段触发 capture</li>
<li>只有自己能够触发 self, (即使冒泡了也不触发)</li>
<li>只触发一次 once</li>
</ol>
<p>默认click事件是会冒泡的, a有默认跳转行为, 我们可以通过 e.preventDefault e.stopPropagation 阻止冒泡, 阻止默认行为, 这在 vue中是一样的</p>
<p>但是在 vue 中, return false 不能阻止冒泡 和默认行为, 需要注意!!!<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 通过事件修饰符阻止冒泡.stop, 阻止默认行为.prevent --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.stop</span>=<span class="string">"btnClick"</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 既要阻止冒泡, 又要阻止默认行为, 就连续点就可以了 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.baidu.com"</span> @<span class="attr">click.stop.prevent</span>=<span class="string">"aClick"</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 捕获阶段执行 @click.capture 注意: capture 要绑定给外层box --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span> @<span class="attr">click.capture</span>=<span class="string">"divClick"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 只有自己能够触发 @click.self 注意: 冒泡了也不触发 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span> @<span class="attr">click.self</span>=<span class="string">"divClick"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="v-for-列表渲染"><a href="#v-for-列表渲染" class="headerlink" title="v-for 列表渲染"></a>v-for 列表渲染</h2><p>基本语法: <code>v-for=&quot;(item, key) in friends&quot;</code> item 键, key 值</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span>&gt;</span>我是&#123;&#123; name &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span> -------- 遍历数组 ---------<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"item in friends"</span>&gt;</span>&#123;&#123; item &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item, index) in friends"</span>&gt;</span>索引: &#123;&#123; index &#125;&#125;, 值: &#123;&#123; item &#125;&#125; <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span> -------- 遍历对象 -------- <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- v-for 遍历可以用来遍历对象, 加上 key 就是键 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item, key) in ppDeDuiXiang"</span>&gt;</span>键: &#123;&#123; key &#125;&#125;, 值: &#123;&#123; item &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span> -------- 遍历字符串 -------- <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item, index) in msg"</span>&gt;</span>键: &#123;&#123; index &#125;&#125;, 值: &#123;&#123; item &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span> 遍历数字 <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span>&gt;</span> 可以快速生成结构 <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in 10"</span>&gt;</span>&#123;&#123; item &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">"鹏鹏"</span>,</span></span><br><span class="line"><span class="javascript">      msg: <span class="string">"我是一个很长的字符串"</span>,</span></span><br><span class="line"><span class="javascript">      friends: [ <span class="string">"张三"</span>, <span class="string">"李四"</span>, <span class="string">"王五"</span>, <span class="string">"赵六"</span>, <span class="string">"田七"</span> ],</span></span><br><span class="line"><span class="undefined">      ppDeDuiXiang: &#123;</span></span><br><span class="line"><span class="javascript">        name: <span class="string">"小美"</span>,</span></span><br><span class="line"><span class="undefined">        age: 18</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="key-属性的使用"><a href="#key-属性的使用" class="headerlink" title="key 属性的使用"></a>key 属性的使用</h2><p>官方api: <a href="https://cn.vuejs.org/v2/api/#key" target="_blank" rel="noopener">https://cn.vuejs.org/v2/api/#key</a></p>
<p>key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。<br>         如果不使用 key，Vue 会使用一种最大限度减少动态元素, 并且尽可能的尝试修复/再利用相同类型元素的算法。<br>         使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。</p>
<blockquote>
<p>可能很多人会觉得好难懂, 那就把我下面准备好的 demo 跑一下, 看下有 :key 和 没有 :key 的区别, 才会真正理解 key 属性的作用</p>
</blockquote>
<p>不加:key, 新旧node没有一一对应, Vue会最小限度动态元素, 所以只会改变内容, 也就是只改里面的文本, 而如果加上:key了以后, Vue 会基于 key 的变化, 一一对应起来<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- vue 中有个就地复用策略 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。</span></span><br><span class="line"><span class="comment">        如果不使用 key，Vue 会使用一种最大限度减少动态元素, 并且尽可能的尝试修复/再利用相同类型元素的算法。</span></span><br><span class="line"><span class="comment">        使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 </span></span><br><span class="line"><span class="comment">  --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 这里加 :key 和 不加 :key 是截然不同的 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in personsArr"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span>&gt;</span> </span><br><span class="line">    id: &#123;&#123; item.id &#125;&#125;</span><br><span class="line">    姓名: &#123;&#123; item.name &#125;&#125;</span><br><span class="line">    年龄: &#123;&#123; item.age &#125;&#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"addFunc"</span>&gt;</span>添加元素<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="undefined">      personsArr: [</span></span><br><span class="line"><span class="undefined">        &#123;</span></span><br><span class="line"><span class="undefined">          id: 1,</span></span><br><span class="line"><span class="javascript">          name: <span class="string">"张三"</span>,</span></span><br><span class="line"><span class="javascript">          age: <span class="string">"24"</span></span></span><br><span class="line"><span class="undefined">        &#125;, </span></span><br><span class="line"><span class="undefined">        &#123;</span></span><br><span class="line"><span class="undefined">          id: 2,</span></span><br><span class="line"><span class="javascript">          name: <span class="string">"李四"</span>,</span></span><br><span class="line"><span class="javascript">          age: <span class="string">"24"</span></span></span><br><span class="line"><span class="undefined">        &#125;,</span></span><br><span class="line"><span class="undefined">        &#123;</span></span><br><span class="line"><span class="undefined">          id: 3,</span></span><br><span class="line"><span class="javascript">          name: <span class="string">"王五"</span>,</span></span><br><span class="line"><span class="javascript">          age: <span class="string">"18"</span></span></span><br><span class="line"><span class="undefined">        &#125;,</span></span><br><span class="line"><span class="undefined">        &#123;</span></span><br><span class="line"><span class="undefined">          id: 4,</span></span><br><span class="line"><span class="javascript">          name: <span class="string">"赵六"</span>,</span></span><br><span class="line"><span class="javascript">          age: <span class="string">"30"</span></span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">      ]</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">      addFunc() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">let</span> lastId = <span class="built_in">Math</span>.max(...this.personsArr.map(<span class="function"><span class="params">v</span>=&gt;</span>v.id)) + <span class="number">1</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.personsArr.unshift(&#123; <span class="attr">id</span>: lastId, <span class="attr">name</span>: <span class="string">"鹏鹏"</span> + <span class="built_in">Math</span>.random(), <span class="attr">age</span>: <span class="string">"16"</span> &#125;)</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>tips: 所以如果内容节点需要动态变化的, 就加上 <code>:key</code>, 一般渲染完成就不变的, 就不用加 <code>:key</code></p>
<h2 id="v-model-的使用"><a href="#v-model-的使用" class="headerlink" title="v-model 的使用"></a>v-model 的使用</h2><p>v-model 是用来做双向数据绑定的, 所以 v-model 一般用于表单元素中<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"msg"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">textarea</span>  <span class="attr">v-model</span>=<span class="string">"msg"</span> <span class="attr">name</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">""</span> <span class="attr">cols</span>=<span class="string">"30"</span> <span class="attr">rows</span>=<span class="string">"10"</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"isChecked"</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">""</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 单选框不能简单的通过true, false 来控制, 因为有很多, 需要通过 value 值来控制 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"selValue"</span> <span class="attr">value</span>=<span class="string">"1"</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"abc"</span> <span class="attr">id</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"selValue"</span> <span class="attr">value</span>=<span class="string">"2"</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"abc"</span> <span class="attr">id</span>=<span class="string">""</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 将选中的 value 值双向数据绑定了 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">select</span> <span class="attr">v-model</span>=<span class="string">"selected"</span> <span class="attr">name</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"1"</span>&gt;</span>帅哥<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"2"</span>&gt;</span>美女<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"3"</span>&gt;</span>野兽<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"4"</span>&gt;</span>大妈<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      msg: <span class="string">"这是文本内容"</span>,</span></span><br><span class="line"><span class="javascript">      isChecked: <span class="literal">true</span>,</span></span><br><span class="line"><span class="undefined">      selValue: 2,</span></span><br><span class="line"><span class="undefined">      selected: 3</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="品牌管理案例"><a href="#品牌管理案例" class="headerlink" title="品牌管理案例"></a>品牌管理案例</h2><p>基本Vue实现品牌, 添加, 删除, 搜索功能</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.brandlist</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#000</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.brandlist</span> <span class="selector-tag">td</span>,<span class="selector-tag">th</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#000</span>;</span></span><br><span class="line"><span class="undefined">      width: 200px;</span></span><br><span class="line"><span class="undefined">      text-align: center;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>请输入品牌名称<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"brandName"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"addBrand"</span>&gt;</span>添加<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>请输入搜索关键字<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"keyWords"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"brandlist"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>id<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>品牌名称<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>创建时间<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>操作<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in search()"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.id &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.brandName&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.cTime &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"deleteBrand( item.id )"</span>&gt;</span>删除 <span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      brandName: <span class="string">""</span>,</span></span><br><span class="line"><span class="javascript">      keyWords: <span class="string">""</span>,</span></span><br><span class="line"><span class="undefined">      brands: [</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">brandName</span>: <span class="string">"林肯"</span>, <span class="attr">cTime</span>: (<span class="keyword">new</span> <span class="built_in">Date</span>).toLocaleDateString() &#125;,</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">brandName</span>: <span class="string">"法拉利"</span>, <span class="attr">cTime</span>: (<span class="keyword">new</span> <span class="built_in">Date</span>).toLocaleDateString() &#125;,</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">brandName</span>: <span class="string">"野马"</span>, <span class="attr">cTime</span>: (<span class="keyword">new</span> <span class="built_in">Date</span>).toLocaleDateString() &#125;,</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">4</span>, <span class="attr">brandName</span>: <span class="string">"劳斯莱斯"</span>, <span class="attr">cTime</span>: (<span class="keyword">new</span> <span class="built_in">Date</span>).toLocaleDateString() &#125;,</span></span><br><span class="line"><span class="undefined">      ]</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 添加品牌</span></span></span><br><span class="line"><span class="undefined">      addBrand() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">if</span> ( !<span class="keyword">this</span>.brandName ) <span class="keyword">return</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 动态创建新对象, 并添加到 brands 中</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">let</span> nextId = <span class="built_in">Math</span>.max( ...this.brands.map( <span class="function"><span class="params">v</span>=&gt;</span>v.id ) ) + <span class="number">1</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.brands.push( &#123; <span class="attr">id</span>: nextId, <span class="attr">brandName</span>: <span class="keyword">this</span>.brandName, <span class="attr">cTime</span>: (<span class="keyword">new</span> <span class="built_in">Date</span>).toLocaleDateString() &#125; )</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.brandName = <span class="string">""</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 根据 id 删除品牌</span></span></span><br><span class="line"><span class="undefined">      deleteBrand( id ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">if</span> ( !id ) <span class="keyword">return</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// findIndex找到 数组中 id 的对象的索引, 将其从数组中删除</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">let</span> delIndex = <span class="keyword">this</span>.brands.findIndex( <span class="function"><span class="params">v</span>=&gt;</span>v.id === id )</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.brands.splice( delIndex, <span class="number">1</span> )</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 搜索功能</span></span></span><br><span class="line"><span class="undefined">      search() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 过滤出符合条件的结果</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="keyword">this</span>.brands.filter( <span class="function"><span class="params">v</span>=&gt;</span> (v.brandName.indexOf(<span class="keyword">this</span>.keyWords) &gt; <span class="number">-1</span>) )</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="按键修饰符-enter"><a href="#按键修饰符-enter" class="headerlink" title="按键修饰符 .enter"></a>按键修饰符 .enter</h2><p>官方api: <a href="https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6</a><br>在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">全部的按键别名：</span><br><span class="line">.enter</span><br><span class="line">.tab</span><br><span class="line">.delete (捕获“删除”和“退格”键)</span><br><span class="line">.esc</span><br><span class="line">.space</span><br><span class="line">.up</span><br><span class="line">.down</span><br><span class="line">.left</span><br><span class="line">.right</span><br></pre></td></tr></table></figure>
<p>使用方式:<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-on:keyup.enter</span>=<span class="string">"submit"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-on:keyup.13</span>=<span class="string">"submit"</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>自定义按键修饰符:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.config.keyCodes.test = <span class="number">13</span></span><br></pre></td></tr></table></figure></p>
<h2 id="v-cloak-解决闪烁问题"><a href="#v-cloak-解决闪烁问题" class="headerlink" title="v-cloak 解决闪烁问题"></a>v-cloak 解决闪烁问题</h2><p>解决闪烁问题, 可以使用v-cloak指令, 配置css样式来实现</p>
<p>v-cloak指令会在vue.js加载完毕之后, 该属性从元素中被移除, 移除之后样式失效, 刚好渲染完成, 就展示出来了<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="selector-attr">[v-cloak]</span> &#123;</span></span><br><span class="line"><span class="undefined">      display: none;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-cloak</span>&gt;</span> &#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="v-text-和-v-html-解决闪烁问题"><a href="#v-text-和-v-html-解决闪烁问题" class="headerlink" title="v-text 和 v-html 解决闪烁问题"></a>v-text 和 v-html 解决闪烁问题</h2><p>使用 v-text 和 v-html 本身标签内容就是空的, 所以不会出现闪烁问题<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>你好, 我是&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span>我会被替换掉<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">"'你好, 我是' + msg"</span>&gt;</span>我会被替换掉<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- html 会把标签解析出来 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">"'你好, 我是' + msg"</span>&gt;</span>我会被替换掉<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>还有一个很大的区别在于: 插值表达式是用来插入内容, 而 v-text 和 v-html 会整个替换掉标签里面的内容</p>
<p>v-html 会将标签解析出来, 而 v-text 不会, 他看到标签会进行转义显示</p>
<h2 id="生命周期钩子函数"><a href="#生命周期钩子函数" class="headerlink" title="生命周期钩子函数"></a>生命周期钩子函数</h2><p>重点: 钩子函数的执行时机<br>因为我们可以在给钩子函数注册自己想要执行的操作,<br>想要在什么时候执行什么操作, 就必须要对每个钩子函数的执行时机非常清楚</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 1. beforeCreate: 在所有的数据初始化之前</span></span><br><span class="line"><span class="comment"> *    如果在beforeCreate 中访问 vue 实例中的数据, 是访问不到的</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 2. created 在数据初始化完成之后</span></span><br><span class="line"><span class="comment"> *    在这个钩子函数中, 是可以执行自己任何的对于数据的操作的, 因为可以拿到数据了</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 3. beforeMount: 在模板创建之后, 模板进行渲染之前</span></span><br><span class="line"><span class="comment"> *    在这个里面, 如果去访问页面中的元素, 会发现并没有渲染的效果</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 4. mounted: 在模板渲染完成之后, 将渲染之后的结果挂载到页面上的时候</span></span><br><span class="line"><span class="comment"> *    在这个里面, 是可以直接访问页面上已经渲染好的元素的</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 5. beforeUpdate: 在vue监听到数据改变的时候, 在元素更新之前</span></span><br><span class="line"><span class="comment"> *    如果这里访问页面中元素的内容, 那么访问到的还是旧的内容</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 6. updated: 在vue监听到数据改变, 并且更新了页面元素之后</span></span><br><span class="line"><span class="comment"> *    如果这里访问页面中元素内容, 那么访问到的就是新的内容</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 7. beforeDestroy: 在 vue 实例销毁之前调用</span></span><br><span class="line"><span class="comment"> *    这个时候访问, vue 对象还是正常可以访问的</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 8. destroyed: 在 vue 实例销毁之后调用</span></span><br><span class="line"><span class="comment"> *    这个时候, vue 对象已经被销毁了, 就不能访问了</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * app.$destroy() 可以销毁实例</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>
<h2 id="Vue-resource"><a href="#Vue-resource" class="headerlink" title="Vue-resource"></a>Vue-resource</h2><p><a href="https://github.com/pagekit/vue-resource/blob/HEAD/docs/http.md" target="_blank" rel="noopener">https://github.com/pagekit/vue-resource/blob/HEAD/docs/http.md</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="comment">// GET /someUrl</span></span><br><span class="line">  <span class="keyword">this</span>.$http.get(<span class="string">'/someUrl'</span>, obj).then(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// success callback</span></span><br><span class="line">  &#125;, response =&gt; &#123;</span><br><span class="line">    <span class="comment">// error callback</span></span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>全局调用方式<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Vue.http.get(<span class="string">"url"</span>, [options]).then(success, fail)</span><br><span class="line">Vue.http.get(<span class="string">"url"</span>, [body], [options]).then(success, fail)</span><br></pre></td></tr></table></figure></p>
<p>实例调用访问<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$http.get(<span class="string">"url"</span>, [body], [options]).then(success, fail)</span><br></pre></td></tr></table></figure></p>
<p>post 请求, 如果传参数据格式是 JSON, 一定要指定 <code>emulateJSON:true</code> </p>
<blockquote>
<p>emulateJSON,    boolean, Send request body as application/x-www-form-urlencoded content type</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$http</span><br><span class="line">  .post(<span class="string">"http://vue.studyit.io/api/addproduct"</span>, &#123;<span class="attr">name</span>: <span class="string">"奥迪"</span>&#125;, &#123;<span class="attr">emulateJSON</span>: <span class="literal">true</span>&#125;)</span><br><span class="line">  .then( <span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log( res );</span><br><span class="line">  &#125;, error =&gt; &#123;</span><br><span class="line">    <span class="built_in">console</span>.log( error );</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure>
<h2 id="axios-发送请求"><a href="#axios-发送请求" class="headerlink" title="axios 发送请求"></a>axios 发送请求</h2><p><a href="https://www.npmjs.com/package/axios" target="_blank" rel="noopener">https://www.npmjs.com/package/axios</a></p>
<h3 id="基本请求"><a href="#基本请求" class="headerlink" title="基本请求"></a>基本请求</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">axios(&#123;</span><br><span class="line">  url: <span class="string">"http://vue.studyit.io/api/addproduct"</span>,</span><br><span class="line">  method: <span class="string">"post"</span>,</span><br><span class="line">  data: <span class="string">"name=bmw"</span></span><br><span class="line">&#125;).then(<span class="function"><span class="params">info</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log( info )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="Vue-resource-和-axios-的区别"><a href="#Vue-resource-和-axios-的区别" class="headerlink" title="Vue-resource 和 axios 的区别"></a><strong>Vue-resource 和 axios 的区别</strong></h3><ol>
<li>vue-resource 是一个vue插件, 依赖于 vue, 而 axios 是一个单独的工具包, 在哪都能用, 专门用来发送 ajax 请求</li>
<li>vue-resource 支持 jsonp, axios 不支持 jsonp ( 因为axios作者认为, 跨域问题就应该由服务器端通过配置请求头, 或者配置服务器代理解决, 而不是使用 jsonp, 加大前后端开发维护成本 )</li>
</ol>
<blockquote>
<p>axios 发送请求, 默认 data 是 “name=Jepson” 这种 url-encoded 格式的, 但是我们一般习惯还是传对象, 所以就需要配置请求拦截器</p>
</blockquote>
<h3 id="axios-拦截器"><a href="#axios-拦截器" class="headerlink" title="axios 拦截器"></a>axios 拦截器</h3><p>拦截器: 请求拦截器的作用, 就是将所有的请求, 全部拦截下来, 执行一段自己定义的代码, 再将加工过的结果进行提交请求<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 拦截器: 请求拦截器的作用, 就是将所有的请求, 全部拦截下来, 执行一段自己定义的代码, 再将加工过的结果进行提交请求</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册请求拦截器</span></span><br><span class="line">axios.interceptors.request.use( <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// config 参数中包含的其实就是所有的请求相关的信息</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// console.log( config.data )</span></span><br><span class="line">  <span class="comment">// 请求的数据存放在 config.data 中</span></span><br><span class="line">  <span class="comment">// 由于服务器端无法直接接收对象类型的数据</span></span><br><span class="line">  <span class="comment">// 所以我们需要将其转成 key=value&amp;key=value这样的字符串形式</span></span><br><span class="line">  <span class="keyword">let</span> str = <span class="string">""</span></span><br><span class="line">  <span class="keyword">for</span> ( <span class="keyword">var</span> k <span class="keyword">in</span> config.data ) &#123;</span><br><span class="line">    str += k + <span class="string">"="</span> + config.data[ k ] + <span class="string">"&amp;"</span></span><br><span class="line">  &#125;</span><br><span class="line">  config.data = str.slice(<span class="number">0</span>,<span class="number">-1</span>);</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log( config.data )</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 由于拦截器的作用只是对请求的相关信息进行加工</span></span><br><span class="line">  <span class="comment">// 最终还是要发送请求的, 所以最后还必须要返回 config</span></span><br><span class="line">  <span class="keyword">return</span> config</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// str.substr(start, length)</span></span><br><span class="line"><span class="comment">// str.substring(start, end)  包括start, 不包括 end</span></span><br><span class="line"><span class="comment">// str.slice(start, end) 可以写负值, 负值表示倒着数</span></span><br><span class="line"></span><br><span class="line">axios(&#123;</span><br><span class="line">  url: <span class="string">"http://vue.studyit.io/api/addproduct"</span>,</span><br><span class="line">  method: <span class="string">"post"</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    name: <span class="string">"Jepson"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;).then(<span class="function"><span class="params">info</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log( info )</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<h2 id="品牌管理案例-ajax请求版"><a href="#品牌管理案例-ajax请求版" class="headerlink" title="品牌管理案例(ajax请求版)"></a>品牌管理案例(ajax请求版)</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.brandlist</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#000</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.brandlist</span> <span class="selector-tag">td</span>,<span class="selector-tag">th</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#000</span>;</span></span><br><span class="line"><span class="undefined">      width: 200px;</span></span><br><span class="line"><span class="undefined">      text-align: center;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>请输入品牌名称<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> @<span class="attr">keyup.enter</span>=<span class="string">"enterToAdd"</span> <span class="attr">v-model</span>=<span class="string">"brandName"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"addBrand"</span>&gt;</span>添加<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>请输入搜索关键字<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"keyWords"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"brandlist"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>id<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>品牌名称<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>创建时间<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>操作<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in search()"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.id &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.name&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.ctime &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"deleteBrand( item.id )"</span>&gt;</span>删除 <span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/axios/dist/axios.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 注册请求拦截器</span></span></span><br><span class="line"><span class="javascript">  axios.interceptors.request.use( <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> str = <span class="string">""</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">for</span> ( <span class="keyword">var</span> k <span class="keyword">in</span> config.data ) &#123;</span></span><br><span class="line"><span class="javascript">      str += k + <span class="string">"="</span> + config.data[ k ] + <span class="string">"&amp;"</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">    config.data = str.slice(0,-1);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> config</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      brandName: <span class="string">""</span>,</span></span><br><span class="line"><span class="javascript">      keyWords: <span class="string">""</span>,</span></span><br><span class="line"><span class="undefined">      brands: []</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    created() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.render();</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">      enterToAdd() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.addBrand()</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      render() &#123;</span></span><br><span class="line"><span class="undefined">        axios(&#123;</span></span><br><span class="line"><span class="javascript">          url: <span class="string">"http://vue.studyit.io/api/getprodlist"</span>,</span></span><br><span class="line"><span class="javascript">          method: <span class="string">"get"</span></span></span><br><span class="line"><span class="javascript">        &#125;).then( <span class="function"><span class="params">info</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log( info )</span></span><br><span class="line"><span class="javascript">          <span class="keyword">this</span>.brands = info.data.message</span></span><br><span class="line"><span class="undefined">        &#125;)</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 添加功能</span></span></span><br><span class="line"><span class="undefined">      addBrand() &#123;</span></span><br><span class="line"><span class="undefined">        axios(&#123;</span></span><br><span class="line"><span class="javascript">          url: <span class="string">"http://vue.studyit.io/api/addproduct"</span>,</span></span><br><span class="line"><span class="javascript">          method: <span class="string">"post"</span>,</span></span><br><span class="line"><span class="undefined">          data: &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="keyword">this</span>.brandName</span></span><br><span class="line"><span class="undefined">          &#125;</span></span><br><span class="line"><span class="javascript">        &#125;).then( <span class="function"><span class="params">info</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log( info );</span></span><br><span class="line"><span class="javascript">          <span class="keyword">this</span>.render()</span></span><br><span class="line"><span class="undefined">        &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.brandName = <span class="string">""</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      search() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="keyword">this</span>.brands.filter( <span class="function"><span class="params">v</span> =&gt;</span> v.name.indexOf(<span class="keyword">this</span>.keyWords)&gt;<span class="number">-1</span> )</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      deleteBrand( id ) &#123;</span></span><br><span class="line"><span class="undefined">        axios(&#123;</span></span><br><span class="line"><span class="javascript">          url: <span class="string">`http://vue.studyit.io/api/delproduct/<span class="subst">$&#123;id&#125;</span>`</span>,</span></span><br><span class="line"><span class="javascript">          method: <span class="string">"get"</span></span></span><br><span class="line"><span class="javascript">        &#125;).then( <span class="function"><span class="params">info</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">if</span> ( info.data.status == <span class="number">0</span> ) &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">this</span>.render();</span></span><br><span class="line"><span class="undefined">          &#125;</span></span><br><span class="line"><span class="undefined">        &#125;)</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h2><p>计算属性: 计算属性的本质就是一个函数, 这个函数会有一个返回值, 使用这个函数的时候, 可以直接像使用属性一样方式去使用它, 展示出来的内容就是这个函数的返回值<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 计算属性</span></span><br><span class="line">computed: &#123;</span><br><span class="line">    result() &#123;</span><br><span class="line">      <span class="built_in">console</span>.log( <span class="string">"result函数被执行了"</span> )</span><br><span class="line">      <span class="keyword">return</span> +<span class="keyword">this</span>.num1 + +<span class="keyword">this</span>.num2</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="计算属性的基本说明-计算器案例"><a href="#计算属性的基本说明-计算器案例" class="headerlink" title="计算属性的基本说明 (计算器案例)"></a>计算属性的基本说明 (计算器案例)</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"num1"</span>&gt;</span></span><br><span class="line">    +</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"num2"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>=<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;span v-text="result()"&gt;&lt;/span&gt; --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;span v-text="result()"&gt;&lt;/span&gt; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-text</span>=<span class="string">"result"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-text</span>=<span class="string">"result"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="javascript">    <span class="comment">// 计算属性: 计算属性的本质就是一个函数, </span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 这个函数会有一个返回值, 使用这个函数的时候, 可以直接像使用属性一样方式去使用它</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 展示出来的内容就是这个函数的返回值</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">      el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">      data: &#123;</span></span><br><span class="line"><span class="undefined">        num1: 0,</span></span><br><span class="line"><span class="undefined">        num2: 0</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      methods: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// result() &#123;</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//   console.log( "result函数被执行了" )</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//   return +this.num1 + +this.num2</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 计算属性</span></span></span><br><span class="line"><span class="undefined">      computed: &#123;</span></span><br><span class="line"><span class="undefined">        result() &#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log( <span class="string">"result函数被执行了"</span> )</span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> +<span class="keyword">this</span>.num1 + +<span class="keyword">this</span>.num2</span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>什么时候用计算属性? 什么时候用methods呢?</strong></p>
<ol>
<li>当需要使用一个数据, 而这个数据是根据其他数据出来的, 那么这个数据就要使用计算属性来做</li>
<li>methods是将一些功能代码进行封装! 事件处理函数, 可以复用的一些请求函数…</li>
</ol>
<p><strong>计算属性和methods的区别</strong></p>
<ol>
<li><strong>计算属性</strong>: 有缓存, 如果计算过一次之后, 数据没有发生改变, 那么下次来使用这个计算属性, 将直接从缓存中获取, 而不是重新计算, 这样可以提高程序运行的效率!</li>
<li><strong>methods 中声明函数</strong>: 虽然也能实现计算属性类型的功能, 但是他没有缓存,每次调用都会重新将函数的代码执行一遍, 效率会比较差</li>
</ol>
<h3 id="计算属性完整模式-getter-setter"><a href="#计算属性完整模式-getter-setter" class="headerlink" title="计算属性完整模式(getter, setter)"></a>计算属性完整模式(getter, setter)</h3><p>上面只是设置了getter, 其实可以设置 getter 和 setter<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  FirstName: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"firstName"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">  LastName: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"lastName"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">  FullName: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"fullName"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      firstName: <span class="string">""</span>,</span></span><br><span class="line"><span class="javascript">      lastName: <span class="string">""</span></span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    computed: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// computed属性简写形式</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// 相当于只给计算属性设置了一个getter</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// fullName() &#123;</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">//   return this.firstName + "." + this.lastName</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">      <span class="comment">// computed属性的完成形式</span></span></span><br><span class="line"><span class="undefined">      fullName: &#123;</span></span><br><span class="line"><span class="undefined">        get() &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> <span class="keyword">this</span>.firstName + <span class="string">"."</span> + <span class="keyword">this</span>.lastName</span></span><br><span class="line"><span class="undefined">        &#125;,</span></span><br><span class="line"><span class="undefined">        set( value ) &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">this</span>.firstName = value.split(<span class="string">"."</span>)[<span class="number">0</span>]</span></span><br><span class="line"><span class="javascript">          <span class="keyword">this</span>.lastName = value.split(<span class="string">"."</span>)[<span class="number">1</span>]</span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h2><h3 id="注册自定义指令"><a href="#注册自定义指令" class="headerlink" title="注册自定义指令"></a>注册自定义指令</h3><p>实现自定义指令 v-focus, 功能让页面中的 input 框, 自动获取焦点<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"msg"</span> <span class="attr">v-focus</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    /* </span></span><br><span class="line"><span class="undefined">      指令: </span></span><br><span class="line"><span class="undefined">      vue中的指令, 其实就是html标签中, 添加一些vue中特定的自定义的属性</span></span><br><span class="line"><span class="undefined">      vue中通过解析这些指令, 就可以实现相应的一些功能</span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="undefined">      自定义指令:</span></span><br><span class="line"><span class="undefined">      vue中自带有很多的指令, 这些指令会提供非常强大且常见的功能</span></span><br><span class="line"><span class="undefined">      这些指令没法完成 100% 的需求, 所以需要我们自己进行自定义指令, 来实现一些我们自己想要的功能</span></span><br><span class="line"><span class="undefined">    */</span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="javascript">    <span class="comment">// 需求: 实现自定义指令 v-focus, 功能让页面中的 input 框, 自动获取焦点</span></span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="javascript">    <span class="comment">// 注册一个全局的自定义指令</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过 Vue.directive 方法, 可以注册全局的自定义指令</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 语法: Vue.directive("指令名称(不加v-)", 钩子函数)</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 一共有 5 个钩子函数(不是说都必须要添加)</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// (1) bind, 指令绑定到元素调用, 只调用一次</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// (2) inserted: 当元素被插入到父节点的时候调用, 只调用一次</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// (3) update: 当数据发生变化的时候, 会调用</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// (4) componentUpdated: 当数据发生变化, dom元素更新完成调用</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// (5) unbind: 当指令解绑, 调用</span></span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="javascript">    Vue.directive(<span class="string">"focus"</span>, &#123;</span></span><br><span class="line"><span class="undefined">      inserted( el ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// el参数, 指定当前指令所在的元素</span></span></span><br><span class="line"><span class="undefined">        el.focus();</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;)</span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">      el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">      data: &#123;</span></span><br><span class="line"><span class="javascript">        msg: <span class="string">"你好"</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h3 id="自定义指令的第二个参数-binding"><a href="#自定义指令的第二个参数-binding" class="headerlink" title="自定义指令的第二个参数 binding"></a>自定义指令的第二个参数 binding</h3><p>binding 是一个对象, 对象中包含指令的基本信息, 包括指令名称, 指令使用的时候参数, 指令使用的时候的修饰符, 为指令赋值的表达式等<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-pp:jepson.shuai.gao.fu</span>=<span class="string">"obj.name"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 指令使用的基本格式:</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// v-指令名称: 参数.修饰符 = "表达式"</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// v-指令名称="表达式"  v-if=".."</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// v-指令名称  v-cloak</span></span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="javascript">    Vue.directive(<span class="string">"pp"</span>, &#123;</span></span><br><span class="line"><span class="undefined">      bind( el, binding ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// el: 指定所在元素的 dom 对象</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// binding: 指令基本信息</span></span></span><br><span class="line"><span class="undefined">        </span></span><br><span class="line"><span class="javascript">        <span class="comment">// binding是一个对象, 对象中包含</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 1. 指令名称</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 2. 指令使用的时候参数</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 3. 指令使用的时候的修饰符</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 4. 为指令赋值的表达式</span></span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="javascript">        <span class="comment">// binding 的属性</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// v-pp:jepson.shuai.gao.fu="obj.name"</span></span></span><br><span class="line"><span class="undefined">        </span></span><br><span class="line"><span class="javascript">        <span class="comment">// 1. name: 就是我们注册指令的时候, 使用的名字 "pp"</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 2. rawName: 等号左边的全部内容  </span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 3. arg: 参数部分的内容   jepson</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 4. modifiers: 是修饰符部分的内容, 是一个对象, 只要是修饰符中有的内容,</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//    都会作为属性添加到这个对象中去, 值为 true</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 5. expression 就是为指令赋值的表达式字符串  obj.name</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 6. value 就是指令赋值表达式所代表的数据的值  鹏鹏</span></span></span><br><span class="line"><span class="undefined">    </span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( binding )</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">      el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">      data: &#123;</span></span><br><span class="line"><span class="undefined">        obj: &#123;</span></span><br><span class="line"><span class="javascript">          name: <span class="string">"鹏鹏"</span></span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h3 id="自定义指令实现-v-text"><a href="#自定义指令实现-v-text" class="headerlink" title="自定义指令实现 v-text"></a>自定义指令实现 v-text</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-mytext</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript"><span class="comment">// 需求: 通过自定义 v-mytext 实现 v-text 功能</span></span></span><br><span class="line"><span class="javascript">Vue.directive(<span class="string">"mytext"</span>,&#123;</span></span><br><span class="line"><span class="undefined">  bind(el, binding) &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// el: 拿到元素</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 内容: binding.value</span></span></span><br><span class="line"><span class="undefined">    el.innerText = binding.value;</span></span><br><span class="line"><span class="undefined">  &#125;,</span></span><br><span class="line"><span class="undefined">  update(el, binding) &#123;</span></span><br><span class="line"><span class="undefined">    el.innerText = binding.value;</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined">&#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">  el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">  data: &#123;</span></span><br><span class="line"><span class="javascript">    msg: <span class="string">"这是一个字符串"</span></span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined">&#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="自定义指令实现-v-bind"><a href="#自定义指令实现-v-bind" class="headerlink" title="自定义指令实现 v-bind"></a>自定义指令实现 v-bind</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">v-bind:src</span>=<span class="string">"url"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">v-mybind:src</span>=<span class="string">"url"</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// v-bind:src="url"</span></span></span><br><span class="line"><span class="javascript">  Vue.directive( <span class="string">"mybind"</span>, &#123;</span></span><br><span class="line"><span class="undefined">    bind( el, binding ) &#123;</span></span><br><span class="line"><span class="undefined">      el.setAttribute( binding.arg, binding.value )</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    update( el, binding )&#123;</span></span><br><span class="line"><span class="undefined">      el.setAttribute( binding.arg, binding.value )</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      url: <span class="string">"https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1518165552984&amp;di=c4040aacb91792a372cd4afd5e49230e&amp;imgtype=0&amp;src=http%3A%2F%2Fp0.ifengimg.com%2Fa%2F2017_51%2Fd5ff73f9eb00011_size246_w600_h517.jpg"</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="自定义指令简写形式"><a href="#自定义指令简写形式" class="headerlink" title="自定义指令简写形式"></a>自定义指令简写形式</h3><p>我们发现基本上 bind 和 update 里面写的基本上是一样的, 所以在 vue 中, 自定义指令的实现, 有一种简写形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 简写形式:</span></span><br><span class="line">Vue.directive(<span class="string">"mybind"</span>,( el, binding ) =&gt; &#123;</span><br><span class="line">  el.setAttribute(binding.arg, binding.value)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>定义时, 后面直接加一个方法, 表示对于bind 和 update 都应用这个函数</p>
<h3 id="自定义指令实现-v-on"><a href="#自定义指令实现-v-on" class="headerlink" title="自定义指令实现 v-on"></a>自定义指令实现 v-on</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click.stop</span>=<span class="string">"btnClick"</span>&gt;</span>我是v-on按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-myon:click.stop</span>=<span class="string">"btnClick"</span>&gt;</span>我是v-myon按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  Vue.directive(<span class="string">"myon"</span>, &#123;</span></span><br><span class="line"><span class="undefined">    bind(el, binding) &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 1. 用户要注册什么事件  参数  binding.arg</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// 2. 用户要实现什么特殊的功能(阻止事件冒泡)</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// 3. 用户要注册事件的处理函数是谁</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log( binding )</span></span><br><span class="line"><span class="undefined">      el.addEventListener( binding.arg, e =&gt; &#123;</span></span><br><span class="line"><span class="undefined">        binding.value( e )</span></span><br><span class="line"><span class="undefined">        binding.modifiers.stop &amp;&amp; e.stopPropagation();</span></span><br><span class="line"><span class="undefined">        binding.modifiers.prevent &amp;&amp; e.preventDefault();</span></span><br><span class="line"><span class="undefined">      &#125;)</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">      btnClick( e ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( e );</span></span><br><span class="line"><span class="undefined">        alert(123)</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="art-template-过滤器"><a href="#art-template-过滤器" class="headerlink" title="art-template 过滤器"></a>art-template 过滤器</h2><p>过滤器?? 是啥??<br>过滤器的本质, 其实就是一个函数<br>这个函数接收参数, 将参数加工之后, 获得一个返回值<br>用户看到的就是这个返回值<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/html"</span> <span class="attr">id</span>=<span class="string">"tpl"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; name &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; age &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; birthday | dateFormatter 'YYYY-MM-DD, HH:mm:SS' &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/jquery/dist/jquery.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/art-template/lib/template-web.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/moment/min/moment.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> obj = &#123;</span></span><br><span class="line"><span class="javascript">    name: <span class="string">"鹏鹏"</span>,</span></span><br><span class="line"><span class="undefined">    age: 18,</span></span><br><span class="line"><span class="javascript">    birthday: <span class="keyword">new</span> <span class="built_in">Date</span>()</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  template.defaults.imports.dateFormatter = <span class="function">(<span class="params"> date, formate </span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log( date );</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 将时间对象, 进行格式化后, 进行返回</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> moment( date ).format( formate || <span class="string">"MMMM Do YYYY"</span>);</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> html = template(<span class="string">"tpl"</span>, obj);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  $(<span class="string">'#box'</span>).html( html )</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="Vue-自定义过滤器"><a href="#Vue-自定义过滤器" class="headerlink" title="Vue 自定义过滤器"></a>Vue 自定义过滤器</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  &#123;&#123; birthday | dateFormatter("YYYY-MM-DD HH:mm:SS") &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/moment/moment.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 注册过滤器</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// Vue.filter("过滤器名称", value =&gt; &#123;</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">//   // value 就是管道符前面的内容</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// &#125;)</span></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  Vue.filter(<span class="string">"dateFormatter"</span>, (value, str) =&gt; &#123;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log( str );</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> moment( value ).format( str || <span class="string">"YY-MM-DD"</span>);</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      birthday: <span class="keyword">new</span> <span class="built_in">Date</span>()</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="局部注册-全局注册自定义过滤器-自定义指令"><a href="#局部注册-全局注册自定义过滤器-自定义指令" class="headerlink" title="局部注册, 全局注册自定义过滤器, 自定义指令"></a>局部注册, 全局注册自定义过滤器, 自定义指令</h2><p>全局Vue.directive 和 Vue.filter, 局部在实例配置中, directives 和 filters<br>使用优先级, 自己有就用自己的, 自己没有才用全局的<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123; money | moneyFormat &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-pp</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app2"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123; money | moneyFormat() &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-pp</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 1. 注册全局自定义指令: Vue.directive</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 2. 注册全局过滤器: Vue.filter</span></span></span><br><span class="line"><span class="javascript">  Vue.directive( <span class="string">"pp"</span>, (el, binding) =&gt; &#123;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log( <span class="string">"Hello pp, 全局的自定义指令"</span> )</span></span><br><span class="line"><span class="undefined">    el.innerText = binding.value</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  Vue.filter( <span class="string">"moneyFormat"</span>, val =&gt; &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> <span class="string">"$"</span> + val</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="undefined">      money: 999,</span></span><br><span class="line"><span class="javascript">      msg: <span class="string">"鹏鹏1"</span></span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    directives: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// "指令名" : 钩子函数</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// "指令名" : 函数</span></span></span><br><span class="line"><span class="javascript">      pp: <span class="function">(<span class="params">el, binding</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 局部优先级更高, 自己有就用自己的</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( <span class="string">"自己的局部自定义指令"</span> );</span></span><br><span class="line"><span class="undefined">        el.innerText = binding.value</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 局部自定义指令</span></span></span><br><span class="line"><span class="undefined">    filters: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="string">"moneyFormat"</span>: <span class="function"><span class="params">val</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="string">"局部$"</span> + val</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app2 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app2"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="undefined">      money: 118,</span></span><br><span class="line"><span class="javascript">      msg: <span class="string">"鹏鹏2"</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="vue-bind-绑定-类样式-class"><a href="#vue-bind-绑定-类样式-class" class="headerlink" title="vue-bind 绑定 类样式 class"></a>vue-bind 绑定 类样式 class</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">// 为元素绑定类样式, 可以使用 v-bind:class=...</span><br><span class="line">// 在绑定的时候, 可以绑定三种内容</span><br><span class="line"></span><br><span class="line">// 1. 字符串  空格隔开的类样式 &quot;red font size&quot;</span><br><span class="line">// 2. 数组   [ &quot;red&quot;, &quot;size&quot;, &quot;font&quot; ]</span><br><span class="line">// 3. 对象   &#123; red: true, size: true, font: false &#125;</span><br><span class="line">// 4. 数组里面放对象和字符串 [ &#123; red: true &#125;, &quot;font&quot;, &#123; size: true &#125; ]</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"'red font size'"</span>&gt;</span>这是div的内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"style"</span>&gt;</span>这是div的内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"style2"</span>&gt;</span>这是div的内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"styleObj"</span>&gt;</span>这是div的内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"styleArr"</span>&gt;</span>这是div的内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      style: <span class="string">"font red"</span>,</span></span><br><span class="line"><span class="javascript">      style2: [ <span class="string">"font"</span>, <span class="string">"red"</span> ],</span></span><br><span class="line"><span class="undefined">      styleObj: &#123;</span></span><br><span class="line"><span class="javascript">        red: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        size: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        font: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 这种用的比较少</span></span></span><br><span class="line"><span class="javascript">      styleArr: [ &#123; <span class="attr">red</span>: <span class="literal">true</span> &#125;, <span class="string">"font"</span>, &#123; <span class="attr">size</span>: <span class="literal">true</span> &#125; ]</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="隔行变色小案例"><a href="#隔行变色小案例" class="headerlink" title="隔行变色小案例"></a>隔行变色小案例</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in 10"</span> <span class="attr">:class</span>=<span class="string">"&#123; pink: index%2===0, yg: index%2!==0 &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="v-bind-在绑定行内样式的用法"><a href="#v-bind-在绑定行内样式的用法" class="headerlink" title="v-bind 在绑定行内样式的用法"></a>v-bind 在绑定行内样式的用法</h2><ol>
<li>直接传字符串</li>
<li>传样式对象</li>
<li>传数组, 数组里面是多个样式对象</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"'width:100px; height: 100px; background-color: red;'"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"style"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"styleObj"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"styleArr"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="comment">// 1. 直接传字符串 width:100px; height: 100px; background-color: red;</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 2. 传对象 &#123; width: "100px", height: "100px" &#125;</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 3. 数组, 里面是样式对象</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      style: <span class="string">"width:100px; height: 100px; background-color: pink;"</span>,</span></span><br><span class="line"><span class="undefined">      styleObj: &#123;</span></span><br><span class="line"><span class="javascript">        width: <span class="string">"100px"</span>,</span></span><br><span class="line"><span class="javascript">        height: <span class="string">"100px"</span>,</span></span><br><span class="line"><span class="javascript">        backgroundColor: <span class="string">"green"</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      styleArr: [</span></span><br><span class="line"><span class="undefined">        &#123;</span></span><br><span class="line"><span class="javascript">          width: <span class="string">"100px"</span>,</span></span><br><span class="line"><span class="javascript">          backgroundColor: <span class="string">"yellowgreen"</span></span></span><br><span class="line"><span class="undefined">        &#125;,</span></span><br><span class="line"><span class="undefined">        &#123;</span></span><br><span class="line"><span class="javascript">          height: <span class="string">"100px"</span></span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">      ]</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="vue-中的过渡"><a href="#vue-中的过渡" class="headerlink" title="vue 中的过渡"></a>vue 中的过渡</h2><ol>
<li>想要搞定过渡, 一定要搞清楚过渡的几个状态节点<br> (x-enter, x-enter-active, x-enter-to)<br> (x-leave, x-leave-active, x-leave-to)</li>
<li>transition 的 name 属性是用来对应类样式的<br> 如果不写name属性, name默认会去找 v-enter 这样的一组样式<br> 如果写了name属性, 比如写了name=”slide”, 那么就会找 slide-enter 这样一组类样式<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.box</span> &#123;</span></span><br><span class="line"><span class="undefined">      width: 200px;</span></span><br><span class="line"><span class="undefined">      height: 200px;</span></span><br><span class="line"><span class="undefined">      background-color: hotpink;</span></span><br><span class="line"><span class="undefined">      transform: translateX(800px);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    /* 过渡的几个状态节点, </span></span><br><span class="line"><span class="undefined">       1. v-enter 进入前     opacity: 0</span></span><br><span class="line"><span class="undefined">       2. v-enter-active   </span></span><br><span class="line"><span class="undefined">       3. v-enter-to 进入后  opacity: 1</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">       1. v-leave 离开前     opacity: 1</span></span><br><span class="line"><span class="undefined">       2. v-leave-acitve</span></span><br><span class="line"><span class="undefined">       3. v-leave-to 离开后  opacity: 0</span></span><br><span class="line"><span class="undefined">    */</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter</span>, <span class="selector-class">.v-leave-to</span> &#123;</span></span><br><span class="line"><span class="undefined">      opacity: 0;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter-to</span>, <span class="selector-class">.v-leave</span> &#123;</span></span><br><span class="line"><span class="undefined">      opacity: 1;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.v-enter-active</span>, <span class="selector-class">.v-leave-active</span> &#123;</span></span><br><span class="line"><span class="undefined">      transition: all 1s linear;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="comment">/* 从哪enter出来 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-class">.slide-enter</span>, <span class="selector-class">.slide-leave-to</span> &#123;</span></span><br><span class="line"><span class="undefined">      transform: translateX(0px);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 最终enter-to默认状态 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-class">.slide-enter-to</span>, <span class="selector-class">.slide-leave</span> &#123;</span></span><br><span class="line"><span class="undefined">      transform: translateX(800px);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 中间状态有过渡 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-class">.slide-enter-active</span>, <span class="selector-class">.slide-leave-active</span> &#123;</span></span><br><span class="line"><span class="undefined">      transition: all 1s linear;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"toggleDiv"</span>&gt;</span>切换显示 div <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- transition 的 name 属性是用来对应类样式的</span></span><br><span class="line"><span class="comment">         如果不写name属性, name默认会去找 v-enter 这样的一组样式</span></span><br><span class="line"><span class="comment">         如果写了name属性, 比如写了name="slide", 那么就会找 slide-enter 这样一组类样式</span></span><br><span class="line"><span class="comment">    --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"slide"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">      el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">      data: &#123;</span></span><br><span class="line"><span class="javascript">        isShow: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      methods: &#123;</span></span><br><span class="line"><span class="undefined">        toggleDiv() &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">this</span>.isShow = !<span class="keyword">this</span>.isShow</span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;)</span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="vue-通过animate-css-实现切换动画"><a href="#vue-通过animate-css-实现切换动画" class="headerlink" title="vue 通过animate.css 实现切换动画"></a>vue 通过animate.css 实现切换动画</h2><p>引入 animate.css, 然后 在两个 active 上 加类即可<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"isShow = !isShow"</span>&gt;</span>切换显示隐藏<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">"animated rubberBand"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">leave-active-class</span>=<span class="string">"animated zoomOutDown"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      isShow: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="通过-js-钩子函数实现动画"><a href="#通过-js-钩子函数实现动画" class="headerlink" title="通过 js 钩子函数实现动画"></a>通过 js 钩子函数实现动画</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"isShow=!isShow"</span>&gt;</span>toggle<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span></span></span><br><span class="line"><span class="tag">    @<span class="attr">before-enter</span> = <span class="string">"beforeEnter"</span></span></span><br><span class="line"><span class="tag">    @<span class="attr">enter</span> = <span class="string">"enter"</span></span></span><br><span class="line"><span class="tag">    @<span class="attr">before-leave</span> = <span class="string">"beforeLeave"</span></span></span><br><span class="line"><span class="tag">    @<span class="attr">leave</span> = <span class="string">"leave"</span></span></span><br><span class="line"><span class="tag">  &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      isShow: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">      beforeEnter( el ) &#123;</span></span><br><span class="line"><span class="javascript">        el.style.marginLeft = <span class="string">"-200px"</span>;</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      enter( el ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 使用 el.offsetWidth 触发一次重绘, 让上面的样式生效</span></span></span><br><span class="line"><span class="undefined">        el.offsetWidth</span></span><br><span class="line"><span class="javascript">        el.style.transition = <span class="string">"all 1s linear"</span></span></span><br><span class="line"><span class="javascript">        el.style.marginLeft = <span class="string">"0"</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      beforeLeave( el ) &#123;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      leave( el ) &#123;</span></span><br><span class="line"><span class="javascript">        el.style.marginLeft = <span class="string">"200px"</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="单页应用程序"><a href="#单页应用程序" class="headerlink" title="单页应用程序"></a>单页应用程序</h2><h3 id="单页应用程序基本概念"><a href="#单页应用程序基本概念" class="headerlink" title="单页应用程序基本概念"></a>单页应用程序基本概念</h3><ol>
<li><p>什么是单页应用(SPA)<br> 整个网站, 只有一个页面的这种网站就是所谓的单页应用<br> 和他对应的就是多页应用程序(平时我们所写的项目基本都是多页应用程序)</p>
</li>
<li><p>单页应用程序的基本原理<br>将所有的功能全都放在同一个页面中, 当进行连接跳转的时候, 只需要将不同的内容进行展示即可<br>不需要将整个页面重新加载</p>
</li>
</ol>
<ol>
<li>单页面应用的好处<br>(1) 减少了浏览器向服务器发送的请求的数量<br>(2) 提升了用户体验</li>
</ol>
<p>存在的问题: 首屏加载时间较长, 不利于 SEO 优化</p>
<h3 id="原生实现-hash-单页应用基本原理"><a href="#原生实现-hash-单页应用基本原理" class="headerlink" title="原生实现 hash 单页应用基本原理"></a>原生实现 hash 单页应用基本原理</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">nav</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#index"</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#login"</span>&gt;</span>登录页<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#list"</span>&gt;</span>列表页<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page index active"</span>&gt;</span></span><br><span class="line">  这是首页</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page login"</span>&gt;</span></span><br><span class="line">  这是登录页</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page list"</span>&gt;</span></span><br><span class="line">  这是列表页</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/jquery/dist/jquery.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 一进入页面, 就根据对应的 hash值 跳转到对应页面</span></span></span><br><span class="line"><span class="undefined">  hashHandle()</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 监听 hash 值的改变</span></span></span><br><span class="line"><span class="javascript">  <span class="built_in">window</span>.onhashchange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="undefined">    hashHandle()</span></span><br><span class="line"><span class="undefined">  &#125;    </span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="keyword">function</span> <span class="title">hashHandle</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 根据 hash 值切换到对应页面</span></span></span><br><span class="line"><span class="javascript">    $(<span class="string">'.page'</span>).removeClass(<span class="string">"active"</span>)</span></span><br><span class="line"><span class="javascript">    $( <span class="string">"."</span> + location.hash.slice(<span class="number">1</span>) ).addClass(<span class="string">"active"</span>)</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="vue-组件的使用"><a href="#vue-组件的使用" class="headerlink" title="vue 组件的使用"></a>vue 组件的使用</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">mycomp</span>&gt;</span><span class="tag">&lt;/<span class="name">mycomp</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 什么是组件化?</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 将页面拆分成一个个组件, 每个页面都看作是由很多组件构成</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 每个组件中包含独立的 html css js 代码 可以任意拿到各个页面进行复用</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 全局注册vue中的组件</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 语法: Vue.component( "组件名称", &#123; 这个对象中包含组件的一些配置信息 &#125; )</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"mycomp"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">h1</span> @<span class="attr">click</span>=<span class="string">'clickHandle'</span>&gt;</span>这是组件中的内容: &#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>",</span></span><br><span class="line"><span class="undefined">    data() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        msg: <span class="string">"你好"</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">      clickHandle() &#123;</span></span><br><span class="line"><span class="undefined">        alert( 123 )</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    created() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"组件被创建粗来了"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 组件中已经注册好了, 如何将组件使用到页面中</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 注册好的组件, 在html代码中可以直接通过以组件名作为标签名的形式</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 写一个标签出来, 组件就被创建出来了</span></span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      msg: <span class="string">"我是主msg"</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="注册组件时-data-是一个对象的说明"><a href="#注册组件时-data-是一个对象的说明" class="headerlink" title="注册组件时 data 是一个对象的说明"></a>注册组件时 data 是一个对象的说明</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注册组件</span></span><br><span class="line">Vue.component(<span class="string">"mycomp"</span>, &#123;</span><br><span class="line">  template: <span class="string">"&lt;h1&gt;我是组件&#123;&#123; msg &#125;&#125;&lt;/h1&gt;"</span>,</span><br><span class="line">  <span class="comment">// 如果组件在创建的时候, data是一个对象, 而对象是引用类型</span></span><br><span class="line">  <span class="comment">// 多个组件就会共用同一个 data 对象, 而不同的组件明显 data 对象是独立的</span></span><br><span class="line">  <span class="comment">// 这样肯定是不合理的</span></span><br><span class="line">  <span class="comment">// data: &#123;</span></span><br><span class="line">  <span class="comment">//     msg: "我是内容"</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 所以 data 需要时一个方法, 每次调用实例化, 都能返回一个独立的对象</span></span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      msg: <span class="string">"我是内容"</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="注册组件模拟简单单页应用"><a href="#注册组件模拟简单单页应用" class="headerlink" title="注册组件模拟简单单页应用"></a>注册组件模拟简单单页应用</h2><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">style</span>&gt;</span><br><span class="line">  <span class="selector-tag">div</span> &gt; <span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>:pink;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.active</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#index"</span>&gt;</span>index页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#home"</span>&gt;</span>home 页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#user"</span>&gt;</span>user 页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-index</span> <span class="attr">:class</span>=<span class="string">'&#123; active: activeComp === "index" &#125;'</span>&gt;</span><span class="tag">&lt;/<span class="name">my-index</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-home</span> <span class="attr">:class</span>=<span class="string">'&#123; active: activeComp === "home" &#125;'</span>&gt;</span><span class="tag">&lt;/<span class="name">my-home</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-user</span> <span class="attr">:class</span>=<span class="string">'&#123; active: activeComp === "user" &#125;'</span>&gt;</span><span class="tag">&lt;/<span class="name">my-user</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 注册组件</span></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"my-index"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> &#123;&#123; msg &#125;&#125; <span class="tag">&lt;/<span class="name">div</span>&gt;</span>",</span></span><br><span class="line"><span class="undefined">    data() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        msg: <span class="string">"我是 index 页面"</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"my-home"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 我是 home 页 <span class="tag">&lt;/<span class="name">div</span>&gt;</span>"</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"my-user"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 我是 user 页 <span class="tag">&lt;/<span class="name">div</span>&gt;</span>"</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      activeComp: <span class="string">"index"</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="built_in">window</span>.onhashchange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="undefined">    app.activeCompa = location.hash.slice(1)</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="component-切换显示组件"><a href="#component-切换显示组件" class="headerlink" title="component 切换显示组件"></a>component 切换显示组件</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 这个 component 标签只是用来占位的, 我们指定要在这个位置显示哪个组件 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- component 有个属性 is 我们可以通过 is 赋值指定的组件名称, 来决定哪个组件显示在这个位置 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"activeComp"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 组件名称 my-index --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"'my-index'"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="实现单页应用-了解"><a href="#实现单页应用-了解" class="headerlink" title="实现单页应用(了解)"></a>实现单页应用(了解)</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#index"</span>&gt;</span>index页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#home"</span>&gt;</span>home 页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#user"</span>&gt;</span>user 页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 这个 component 标签只是用来占位的, 我们指定要在这个位置显示哪个组件 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- component 有个属性 is 我们可以通过 is 赋值指定的组件名称, 来决定哪个组件显示在这个位置 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"activeComp"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 注册组件</span></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"index"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> &#123;&#123; msg &#125;&#125; <span class="tag">&lt;/<span class="name">div</span>&gt;</span>",</span></span><br><span class="line"><span class="undefined">    data() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        msg: <span class="string">"我是 index 页面"</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"home"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 我是 home 页 <span class="tag">&lt;/<span class="name">div</span>&gt;</span>"</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"user"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 我是 user 页 <span class="tag">&lt;/<span class="name">div</span>&gt;</span>"</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      activeComp: <span class="string">"index"</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="javascript">  <span class="built_in">window</span>.onhashchange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="undefined">    app.activeComp = location.hash.slice(1)</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="组件父子关系-嵌套关系-组件父子通讯"><a href="#组件父子关系-嵌套关系-组件父子通讯" class="headerlink" title="组件父子关系(嵌套关系) - 组件父子通讯"></a>组件父子关系(嵌套关系) - 组件父子通讯</h2><p>注意: 组件之间的父子关系的形成, 是在使用组件的时候才形成的,<br>跟组件在哪声明的没有半毛钱关系!!</p>
<h3 id="父子组件通信-父传子-使用prop"><a href="#父子组件通信-父传子-使用prop" class="headerlink" title="父子组件通信-父传子 - 使用prop"></a>父子组件通信-父传子 - 使用prop</h3><p>官方api: <a href="https://cn.vuejs.org/v2/guide/components.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/components.html</a><br>组件实例的作用域是独立的, 就意味着, 子组件是不能直接用父组件数据模型里面的数据的, 就需要通过prop来进行传参</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1. 父组件想要给子组件传参, 在子组件标签上写一个属性, 将父组件的数据赋值</span></span><br><span class="line"><span class="comment">        给当前属性, 子组件就可以通过 props 来接收到传递的参数了</span></span><br><span class="line"><span class="comment">  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">son</span> <span class="attr">:msgfromfather</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">son</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 组件之间是完全独立的, 子组件无法访问到父组件的内容的</span></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"son"</span>, &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 3. 在子组件中, 使用数据, 直接使用在 props 中声明的名字即可</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">//    就像是在用自己的数据一样</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 4. 父组件的数据变化, 子组件使用的接收过来的数据, 也会随之变化</span></span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123; msgfromfather &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span>",</span></span><br><span class="line"><span class="undefined">    data() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        msg: <span class="string">"我是子组件的msg"</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 2. 由于父组件传递数据过来, 所以子组件需要手动的通过 props 进行接收</span></span></span><br><span class="line"><span class="javascript">    props: [ <span class="string">'msgfromfather'</span> ]</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      msg: <span class="string">"我是父组件的message"</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="父子组件通信-子传父"><a href="#父子组件通信-子传父" class="headerlink" title="父子组件通信-子传父"></a>父子组件通信-子传父</h3><p>问题: 组件之间是完全独立的, 父组件无法直接访问到子组件的数据<br>传参原理: </p>
<ol>
<li>父组件定义一个函数</li>
<li>子组件中 间接调用 父组件的函数</li>
<li>将子组件的 数据作为函数参数 传递给父组件</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 2. 使用son组件的时候, 将父组件的 getMsgFromSon函数作为事件绑定给son组件, </span></span><br><span class="line"><span class="comment">          事件名称自己定义 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">son</span> @<span class="attr">func</span>=<span class="string">"getMsgFromSon"</span>&gt;</span><span class="tag">&lt;/<span class="name">son</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 问题: 组件之间是完全独立的, 父组件无法直接访问子组件内的数据</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 原理: 其实就是在父组件中声明一个函数</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 在子组件中 间接的调用父组件中的函数, </span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 将子组件中的数据 作为函数的参数传递给父组件</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 全局注册组件</span></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"son"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">h3</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'btnClick'</span>&gt;</span> 传递数据给父元素 <span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">h3</span>&gt;</span>",</span></span><br><span class="line"><span class="undefined">    data() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        msg: <span class="string">"Dady, 我没有钱了, 给我来点钱吧"</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">      btnClick() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 发送数据给父组件, 需要触发父组件绑定的事件</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// this.$emit("事件名称", 给事件传递的参数)</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 注意: this.$emit 传递参数只能传一个, 如果需要传多个数据</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//      可以封装到一个对象中去</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.$emit(<span class="string">"func"</span>, <span class="keyword">this</span>.msg)</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="javascript">      msg: <span class="string">"这是父组件中的数据"</span></span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1. 声明函数</span></span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">      getMsgFromSon( msg ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( <span class="string">"儿子来信了, 他说: "</span> + msg )</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="兄弟组件通信-global-event-bus"><a href="#兄弟组件通信-global-event-bus" class="headerlink" title="兄弟组件通信 - global event bus"></a>兄弟组件通信 - global event bus</h2><h3 id="on-和-emit-的认识"><a href="#on-和-emit-的认识" class="headerlink" title="\$on 和 \$emit 的认识"></a>\$on 和 \$emit 的认识</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// $on 可以用来注册事件</span></span><br><span class="line"><span class="comment">// vue实例.$on("事件名称", arg=&gt;&#123; &#125; )</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// $emit 可以用来触发事件</span></span><br><span class="line"><span class="comment">// vue实例.$emit("事件名称", 参数)</span></span><br><span class="line"></span><br><span class="line">app.$on(<span class="string">"news"</span>, arg =&gt; &#123;</span><br><span class="line">  <span class="built_in">console</span>.log( <span class="string">"大新闻来了, "</span> + arg )</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.$emit(<span class="string">"news"</span>, <span class="string">"鹏鹏找到女票辣!!!"</span>)</span><br></pre></td></tr></table></figure>
<h3 id="兄弟通信实例"><a href="#兄弟通信实例" class="headerlink" title="兄弟通信实例"></a>兄弟通信实例</h3><p>步骤:</p>
<ol>
<li>在哥哥组件内 声明1个函数</li>
<li>邮差内注册事件, 绑定哥哥的函数  <code>youchai.$on</code>( 注册 )</li>
<li>弟弟组件内, 触发邮差的事件即可  <code>youchai.$emit</code>( 触发 )<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">gege</span>&gt;</span><span class="tag">&lt;/<span class="name">gege</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">didi</span>&gt;</span><span class="tag">&lt;/<span class="name">didi</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// global event bus</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> youchai = <span class="keyword">new</span> Vue()</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="comment">// youchai.$on</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// youchai.$emit</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 兄弟组件之间也是相互独立的</span></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"gege"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 我是哥哥组件, 信箱: &#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span>",</span></span><br><span class="line"><span class="undefined">    data() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        msg: <span class="string">""</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">     </span></span><br><span class="line"><span class="undefined">      getMsgFromDiDi( msg ) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( <span class="string">"我的弟弟来信了"</span> )</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log( msg )</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.msg = msg</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    created() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 2. 邮差内注册事件, 绑定哥哥的函数  `youchai.$on`</span></span></span><br><span class="line"><span class="javascript">      youchai.$on(<span class="string">"brothertalk"</span>, <span class="keyword">this</span>.getMsgFromDiDi )</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">"didi"</span>, &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 我是弟弟组件 <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">'msg'</span>/&gt;</span> <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'btnClick'</span>&gt;</span> 发消息给哥哥 <span class="tag">&lt;/<span class="name">button</span>&gt;</span> <span class="tag">&lt;/<span class="name">div</span>&gt;</span>",</span></span><br><span class="line"><span class="undefined">    data() &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        msg: <span class="string">"我是弟弟的msg"</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="undefined">    methods: &#123;</span></span><br><span class="line"><span class="undefined">      btnClick() &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 3. 弟弟组件内, 触发邮差的事件即可  `youchai.$emit`</span></span></span><br><span class="line"><span class="javascript">        youchai.$emit(<span class="string">"brothertalk"</span>, <span class="keyword">this</span>.msg)</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123; &#125;</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="vue-router"><a href="#vue-router" class="headerlink" title="vue-router"></a>vue-router</h2><h3 id="vue-router-基本介绍"><a href="#vue-router-基本介绍" class="headerlink" title="vue-router 基本介绍"></a>vue-router 基本介绍</h3><p>路由: 根据不同的 url hash值, 给用户对应不同的展示内容<br>Vue-router 就是将 hash 值和 组件进行 一一对应</p>
<p>使用 vue-router 其实就是</p>
<ol>
<li>创建一个 hash 值和 组件进行对应的规则</li>
<li>给组件指定一个显示的位置</li>
</ol>
<h3 id="vue-router-的基本使用"><a href="#vue-router-的基本使用" class="headerlink" title="vue-router 的基本使用"></a>vue-router 的基本使用</h3><ol>
<li>创建组件的构造对象</li>
<li>通过VueRouter创建路由对象, 并通过routes指定路由规则</li>
<li>页面中刨坑, router-view 用于显示匹配的组件</li>
<li>在 app 实例化中, 注册路由</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/findmusic"</span>&gt;</span>发现音乐<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/mymusic"</span>&gt;</span>我的音乐<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/friend"</span>&gt;</span>朋友<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 3. vue-router 会自动将匹配到的组件显示在 router-view 中 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue-router/dist/vue-router.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 使用路由的目的, 当用户访问到不同的 hash 值时让用户显示不同的内容</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 1. 创建组件的构造对象</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> findMusic = &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 这是发现音乐页面 <span class="tag">&lt;/<span class="name">div</span>&gt;</span>"</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> myMusic = &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 我的音乐 <span class="tag">&lt;/<span class="name">div</span>&gt;</span>"</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> friend = &#123;</span></span><br><span class="line"><span class="xml">    template: "<span class="tag">&lt;<span class="name">div</span>&gt;</span> 我的朋友 <span class="tag">&lt;/<span class="name">div</span>&gt;</span>"</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 2. 创建路由对象, 并且指定路由规则</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// routes 中的每一个元素都是一个对象, 表示hash值与组件的对应关系</span></span></span><br><span class="line"><span class="undefined">    routes: [</span></span><br><span class="line"><span class="undefined">      &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 这个就是用户最终访问的 路由路径</span></span></span><br><span class="line"><span class="javascript">        path: <span class="string">"/findmusic"</span>,</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 访问这个路径的时候, 应该显示的组件</span></span></span><br><span class="line"><span class="undefined">        component: findMusic</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      &#123;</span></span><br><span class="line"><span class="javascript">        path: <span class="string">"/mymusic"</span>,</span></span><br><span class="line"><span class="undefined">        component: myMusic</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      &#123;</span></span><br><span class="line"><span class="javascript">        path: <span class="string">"/friend"</span>,</span></span><br><span class="line"><span class="undefined">        component: friend</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    ]</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="undefined">    data: &#123;</span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="undefined">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 4. 将 router 和 vue 关联</span></span></span><br><span class="line"><span class="undefined">    router</span></span><br><span class="line"><span class="undefined">  &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="router-link-的使用介绍"><a href="#router-link-的使用介绍" class="headerlink" title="router-link 的使用介绍"></a>router-link 的使用介绍</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/findmusic"</span>&gt;</span>发现音乐<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/mymusic"</span>&gt;</span>我的音乐<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/friend"</span>&gt;</span>朋友<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>####基本使用方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- router-link 最终生成的也是 a 标签</span></span><br><span class="line"><span class="comment">      但是和直接写 a 不一样的是, </span></span><br><span class="line"><span class="comment">      vue 会自动为当前 激活的 router-link 标签</span></span><br><span class="line"><span class="comment">      添加 router-link-exact-active </span></span><br><span class="line"><span class="comment">      router-link-active 类样式</span></span><br><span class="line"><span class="comment">      </span></span><br><span class="line"><span class="comment">      可以利用这个特性, 方便的让当前页面的链接高亮</span></span><br><span class="line"><span class="comment">      </span></span><br><span class="line"><span class="comment">      指定 tag 以后, 最终显示的标签类型就是 tag类型</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">tag</span>=<span class="string">"button"</span> <span class="attr">to</span>=<span class="string">"/findmusic"</span>&gt;</span>发现音乐<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"&#123;path: '/mymusic'&#125;"</span>&gt;</span>我的音乐<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"&#123;name: 'friend'&#125;"</span>&gt;</span>朋友<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 可以指定 query 参数 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"&#123;name: 'friend', query: &#123; titid: 123, age: 18 &#125; &#125;"</span>&gt;</span>朋友<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/friend?titid=123&amp;age=18"</span>&gt;</span>朋友<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="通过-传参的路由参数获取"><a href="#通过-传参的路由参数获取" class="headerlink" title="通过 ? 传参的路由参数获取"></a>通过 ? 传参的路由参数获取</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/pp?name=pp&amp;age=18"</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>通过实例组件的 $route 中的 query 来获取<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> pp = &#123;</span><br><span class="line">  template: <span class="string">"&lt;div&gt;我是 &#123;&#123; $route.query.name &#125;&#125;, 我今年 &#123;&#123; $route.query.age &#125;&#125; 岁了&lt;/div&gt;"</span>,</span><br><span class="line">  </span><br><span class="line">  created() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log( <span class="keyword">this</span>.$route )</span><br><span class="line">    <span class="comment">//获取参数</span></span><br><span class="line">    <span class="built_in">console</span>.log( <span class="keyword">this</span>.$route.query )</span><br><span class="line">  &#125;,</span><br><span class="line">  </span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="通过路由路径设置参数"><a href="#通过路由路径设置参数" class="headerlink" title="通过路由路径设置参数"></a>通过路由路径设置参数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建路由对象</span></span><br><span class="line"><span class="keyword">let</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="comment">// 加上 ? 可传可不传, 可以设置多个参数</span></span><br><span class="line">      path: <span class="string">"/pp/:age/:name?"</span>,</span><br><span class="line">      component: pp</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>获取参数, 通过 <code>this.$route.params</code> 获取路由参数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> pp = &#123;</span><br><span class="line">  template: <span class="string">"&lt;div&gt; 我是 pp 组件, 我今年 &#123;&#123; $route.params.age &#125;&#125;岁 &lt;/div&gt;"</span>,</span><br><span class="line">  created() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log( <span class="keyword">this</span>.$route.params )</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      msg: <span class="string">"hello"</span> </span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>对应 router-link 编写形式<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"&#123; name: 'pp', params: &#123; age: 18, name: 'pp'&#125; &#125;"</span>&gt;</span>link<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<h3 id="编程式导航-通过js跳转"><a href="#编程式导航-通过js跳转" class="headerlink" title="编程式导航(通过js跳转)"></a>编程式导航(通过js跳转)</h3><p><a href="https://router.vuejs.org/zh-cn/essentials/navigation.html" target="_blank" rel="noopener">https://router.vuejs.org/zh-cn/essentials/navigation.html</a></p>
<p>vue 为了方便使用, 将router对象挂载在了全局</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 可以直接写路径</span></span><br><span class="line"><span class="keyword">this</span>.$router.push(<span class="string">"/peter"</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 也可以传对象</span></span><br><span class="line"><span class="keyword">this</span>.$router.push(&#123; <span class="attr">path</span>: <span class="string">"/peter"</span>, <span class="attr">query</span>: &#123; <span class="attr">age</span>: <span class="number">18</span> &#125;&#125;)</span><br></pre></td></tr></table></figure>
<p>历史回退<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 历史回退 不推荐使用 history.go(-1)</span></span><br><span class="line"><span class="comment">// 要用, $router.go(-1)</span></span><br><span class="line"><span class="keyword">this</span>.$router.go(<span class="number">-1</span>);</span><br></pre></td></tr></table></figure></p>
<h3 id="路由嵌套"><a href="#路由嵌套" class="headerlink" title="路由嵌套"></a>路由嵌套</h3><p>组件里面是可以嵌套子路由的, 里面再写 router-view, 配置 children 规则即可<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">"/account"</span>,</span><br><span class="line">      component: account,</span><br><span class="line">      children: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="comment">// 注意: 前面千万不能加 /</span></span><br><span class="line">          path: <span class="string">"login"</span>,</span><br><span class="line">          component: login</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          path: <span class="string">"register"</span>,</span><br><span class="line">          component: register</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<hr>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="http://static.zybuluo.com/JepsonCC/qi8vjk62dk51zqt0a8an8xir/image_1c4uso3kemnn18jg11951ho31g2o9.png" alt="Jepson 微信支付"/>
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="http://static.zybuluo.com/JepsonCC/6l63d7x84xii3bwgkpcqk33n/image_1c4usp36f121s29j2r511fd18r5m.png" alt="Jepson 支付宝"/>
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/vue/" rel="tag"># vue</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/02/02/微信小程序/" rel="next" title="微信小程序">
                <i class="fa fa-chevron-left"></i> 微信小程序
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="http://static.zybuluo.com/JepsonCC/focrrncqb7uriops1uguvcfd/image_1c4uu558p1vhh71a1mvqbsp11i2m.png"
                alt="Jepson" />
            
              <p class="site-author-name" itemprop="name">Jepson</p>
              <p class="site-description motion-element" itemprop="description">爱学习, 爱前端</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/JepsonGithub" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue入坑笔记-大杂烩"><span class="nav-number">1.</span> <span class="nav-text">Vue入坑笔记(大杂烩)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是Vue-js"><span class="nav-number">2.</span> <span class="nav-text">什么是Vue.js</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-js-初体验"><span class="nav-number">3.</span> <span class="nav-text">Vue.js 初体验</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-双向数据绑定基本原理"><span class="nav-number">4.</span> <span class="nav-text">Vue 双向数据绑定基本原理</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#前置知识点-defineProperty"><span class="nav-number">4.1.</span> <span class="nav-text">前置知识点: defineProperty</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#get-和-set-重点"><span class="nav-number">4.2.</span> <span class="nav-text">get 和 set(重点)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#双向数据绑定"><span class="nav-number">4.3.</span> <span class="nav-text">双向数据绑定</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-bind-使用-vue-给属性绑定数据"><span class="nav-number">5.</span> <span class="nav-text">v-bind 使用 vue 给属性绑定数据</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-if-和-v-show"><span class="nav-number">6.</span> <span class="nav-text">v-if 和 v-show</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-on-指令的使用"><span class="nav-number">7.</span> <span class="nav-text">v-on 指令的使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#在-vue-事件中获取事件对象"><span class="nav-number">8.</span> <span class="nav-text">在 vue 事件中获取事件对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-中的事件修饰符"><span class="nav-number">9.</span> <span class="nav-text">vue 中的事件修饰符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-for-列表渲染"><span class="nav-number">10.</span> <span class="nav-text">v-for 列表渲染</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#key-属性的使用"><span class="nav-number">11.</span> <span class="nav-text">key 属性的使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-model-的使用"><span class="nav-number">12.</span> <span class="nav-text">v-model 的使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#品牌管理案例"><span class="nav-number">13.</span> <span class="nav-text">品牌管理案例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#按键修饰符-enter"><span class="nav-number">14.</span> <span class="nav-text">按键修饰符 .enter</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-cloak-解决闪烁问题"><span class="nav-number">15.</span> <span class="nav-text">v-cloak 解决闪烁问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-text-和-v-html-解决闪烁问题"><span class="nav-number">16.</span> <span class="nav-text">v-text 和 v-html 解决闪烁问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#生命周期钩子函数"><span class="nav-number">17.</span> <span class="nav-text">生命周期钩子函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-resource"><span class="nav-number">18.</span> <span class="nav-text">Vue-resource</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#axios-发送请求"><span class="nav-number">19.</span> <span class="nav-text">axios 发送请求</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#基本请求"><span class="nav-number">19.1.</span> <span class="nav-text">基本请求</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Vue-resource-和-axios-的区别"><span class="nav-number">19.2.</span> <span class="nav-text">Vue-resource 和 axios 的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#axios-拦截器"><span class="nav-number">19.3.</span> <span class="nav-text">axios 拦截器</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#品牌管理案例-ajax请求版"><span class="nav-number">20.</span> <span class="nav-text">品牌管理案例(ajax请求版)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#计算属性"><span class="nav-number">21.</span> <span class="nav-text">计算属性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#计算属性的基本说明-计算器案例"><span class="nav-number">21.1.</span> <span class="nav-text">计算属性的基本说明 (计算器案例)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#计算属性完整模式-getter-setter"><span class="nav-number">21.2.</span> <span class="nav-text">计算属性完整模式(getter, setter)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#自定义指令"><span class="nav-number">22.</span> <span class="nav-text">自定义指令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#注册自定义指令"><span class="nav-number">22.1.</span> <span class="nav-text">注册自定义指令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义指令的第二个参数-binding"><span class="nav-number">22.2.</span> <span class="nav-text">自定义指令的第二个参数 binding</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义指令实现-v-text"><span class="nav-number">22.3.</span> <span class="nav-text">自定义指令实现 v-text</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义指令实现-v-bind"><span class="nav-number">22.4.</span> <span class="nav-text">自定义指令实现 v-bind</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义指令简写形式"><span class="nav-number">22.5.</span> <span class="nav-text">自定义指令简写形式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义指令实现-v-on"><span class="nav-number">22.6.</span> <span class="nav-text">自定义指令实现 v-on</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#art-template-过滤器"><span class="nav-number">23.</span> <span class="nav-text">art-template 过滤器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-自定义过滤器"><span class="nav-number">24.</span> <span class="nav-text">Vue 自定义过滤器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#局部注册-全局注册自定义过滤器-自定义指令"><span class="nav-number">25.</span> <span class="nav-text">局部注册, 全局注册自定义过滤器, 自定义指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-bind-绑定-类样式-class"><span class="nav-number">26.</span> <span class="nav-text">vue-bind 绑定 类样式 class</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#隔行变色小案例"><span class="nav-number">26.1.</span> <span class="nav-text">隔行变色小案例</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-bind-在绑定行内样式的用法"><span class="nav-number">27.</span> <span class="nav-text">v-bind 在绑定行内样式的用法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-中的过渡"><span class="nav-number">28.</span> <span class="nav-text">vue 中的过渡</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-通过animate-css-实现切换动画"><span class="nav-number">29.</span> <span class="nav-text">vue 通过animate.css 实现切换动画</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#通过-js-钩子函数实现动画"><span class="nav-number">30.</span> <span class="nav-text">通过 js 钩子函数实现动画</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#单页应用程序"><span class="nav-number">31.</span> <span class="nav-text">单页应用程序</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#单页应用程序基本概念"><span class="nav-number">31.1.</span> <span class="nav-text">单页应用程序基本概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#原生实现-hash-单页应用基本原理"><span class="nav-number">31.2.</span> <span class="nav-text">原生实现 hash 单页应用基本原理</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-组件的使用"><span class="nav-number">32.</span> <span class="nav-text">vue 组件的使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#注册组件时-data-是一个对象的说明"><span class="nav-number">33.</span> <span class="nav-text">注册组件时 data 是一个对象的说明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#注册组件模拟简单单页应用"><span class="nav-number">34.</span> <span class="nav-text">注册组件模拟简单单页应用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#component-切换显示组件"><span class="nav-number">35.</span> <span class="nav-text">component 切换显示组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#实现单页应用-了解"><span class="nav-number">35.1.</span> <span class="nav-text">实现单页应用(了解)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#组件父子关系-嵌套关系-组件父子通讯"><span class="nav-number">36.</span> <span class="nav-text">组件父子关系(嵌套关系) - 组件父子通讯</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#父子组件通信-父传子-使用prop"><span class="nav-number">36.1.</span> <span class="nav-text">父子组件通信-父传子 - 使用prop</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#父子组件通信-子传父"><span class="nav-number">36.2.</span> <span class="nav-text">父子组件通信-子传父</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#兄弟组件通信-global-event-bus"><span class="nav-number">37.</span> <span class="nav-text">兄弟组件通信 - global event bus</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#on-和-emit-的认识"><span class="nav-number">37.1.</span> <span class="nav-text">\$on 和 \$emit 的认识</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#兄弟通信实例"><span class="nav-number">37.2.</span> <span class="nav-text">兄弟通信实例</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-router"><span class="nav-number">38.</span> <span class="nav-text">vue-router</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-router-基本介绍"><span class="nav-number">38.1.</span> <span class="nav-text">vue-router 基本介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-router-的基本使用"><span class="nav-number">38.2.</span> <span class="nav-text">vue-router 的基本使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#router-link-的使用介绍"><span class="nav-number">38.3.</span> <span class="nav-text">router-link 的使用介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#通过-传参的路由参数获取"><span class="nav-number">38.4.</span> <span class="nav-text">通过 ? 传参的路由参数获取</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#通过路由路径设置参数"><span class="nav-number">38.5.</span> <span class="nav-text">通过路由路径设置参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#编程式导航-通过js跳转"><span class="nav-number">38.6.</span> <span class="nav-text">编程式导航(通过js跳转)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#路由嵌套"><span class="nav-number">38.7.</span> <span class="nav-text">路由嵌套</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Jepson</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




<div><span><a href="http://www.miitbeian.gov.cn">苏ICP备18002051号-1</a></span></div>

        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
